<template>
  <div>
    <customDialog
      :title="`导入链接`"
      :dialogVisible="dialogVisible"
      @close="closeDialog"
      @confirm="confirmDialog"
      width="600"
    >
      <div>
        <el-button type="primary" @click="downDemo" style="margin-bottom: 12px">
          <el-icon>
            <Download />
          </el-icon>
          下载模板
        </el-button>
        <div>
          <el-upload
            action="#"
            drag
            accept=".xlsx,.csv,.xls"
            :auto-upload="false"
            :on-change="handleImportFile"
            :limit="1"
          >
            <!-- :show-file-list="false" -->
            <!-- <el-button icon="el-icon-upload2">导入</el-button> -->
            <el-icon class="el-icon--upload"><UploadFilled /></el-icon>
            <div class="el-upload__text">
              将文件拖到此处 或者 <em>点击上传</em>
            </div>
          </el-upload>
        </div>
      </div>
    </customDialog>
  </div>
</template>

<script lang="ts" setup>
import customDialog from "@/components/CustomDialog/index.vue";
import { ref, reactive, toRefs, onMounted, computed } from "vue";
import type { FormInstance } from "element-plus";
import * as XLSX from "xlsx";
import { Download, UploadFilled } from "@element-plus/icons-vue";
import { xlsxToJson } from "@/utils/tools";
import { importExcel } from "@/api/promotionLink/index";
import { cloneDeep } from "lodash-es";

const ruleFormRef = ref<FormInstance>();
const dialogVisible = ref(false);
const excelArr = ref<Array<any>>([]);
const tableHeadCnToEn = ref({
  广告商: "platform",
  推广链接名称: "linkName",
  剧目名称: "operaName",
  推广集数: "episode",
  充值模板名称: "payTemplateName",
  "解锁每集价格(金币)": "unblockCoinAmount",
  开始付费集数: "chargeEpisodeNo",
  首充模板名称: "firstPayTemplateName",
});

const handleImportFile = async (file: any) => {
  let e = file.raw;
  //  获取文件类型
  const fileType = e.name.split(".")[e.name.split(".").length - 1];
  switch (fileType) {
    case "xlsx":
      excelArr.value = await xlsxToJson(e, tableHeadCnToEn.value);
      break;
    case "xls":
      excelArr.value = await xlsxToJson(e, tableHeadCnToEn.value);
      break;
  }
  console.log("excelArr----", excelArr.value); // 数组对象 就是Excel里的数据
};

// 下载模板
const downDemo = () => {
  // 创建工作簿
  var workbook = XLSX.utils.book_new();
  // 创建工作表数据
  var data = [
    [
      "广告商",
      "推广链接名称",
      "剧目名称",
      "推广集数",
      "充值模板名称",
      "解锁每集价格(金币)",
      "开始付费集数",
      "首充模板名称",
    ],
    ["xt", "小明-赘婿当道-高充001", "赘婿当道", 10, "超值推荐", 100, 10, ""],
  ];

  // 创建工作表
  var worksheet = XLSX.utils.aoa_to_sheet(data);
  worksheet["!cols"] = [];
  for (let i = 0; i <= 5; ++i) {
    const r: any = {};
    if (i == 1) r.wpx = 200;
    else r.wpx = 100;
    worksheet["!cols"][i] = r;
  }

  // 将工作表添加到工作簿
  XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");

  // 保存工作簿为 Excel 文件
  XLSX.writeFile(workbook, "template.xlsx");
};

// 关闭 重置
const closeDialog = () => {
  dialogVisible.value = false;
};

// 成功
const emit = defineEmits(["success"]);
const confirmDialog = () => {
  let params = {
    promotions: excelArr.value,
  };
  importExcel(params).then(() => {
    dialogVisible.value = false;
    emit("success");
  });
};

// 父级电子显示dialog
const showDialog = (val: Record<string, any>) => {
  console.log("弹窗显示---", val);
  dialogVisible.value = true;
};

defineExpose({
  showDialog,
});
</script>

<style scoped lang="scss"></style>
